<template>
  <el-row>
    <el-col>
      <el-menu
       class="navdiv"
        router
        style="background:rgba(0,0,0,0)"
        mode="horizontal"
        :default-active="activepath"
      >
        <el-menu-item index="/SystemHome2">
          <!-- <i class="el-icon-s-home"></i> -->
          <span slot="title" class="hl_title">系统首页</span>
        </el-menu-item>
        <el-menu-item index="/AlarmFailure">
          <!-- <i class="el-icon-message-solid"></i> -->
          <span slot="title" class="hl_title">报警故障</span>
        </el-menu-item>
        <el-menu-item index="/DataAnalysis">
          <!-- <i class="el-icon-s-data"></i> -->
          <span slot="title" class="hl_title">数据分析</span>
        </el-menu-item>
                <el-menu-item index="/powerAnalyze">
          <!-- <i class="el-icon-s-marketing"></i> -->
          <span slot="title" class="hl_title">用电量分析</span>
        </el-menu-item>
        <el-menu-item index="/DeviceManagement">
          <!-- <i class="el-icon-s-tools"></i> -->
          <span slot="title" class="hl_title">设备管理</span>
        </el-menu-item>
        <el-menu-item index="/picPoint0">
          <!-- <i class="el-icon-menu"></i> -->
          <span slot="title" class="hl_title">系统管理</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      activepath: '/SystemHome2'
    }
  },
  watch: {
    $route(){
      this.activepath = this.$route.path
    }
  },
  // mounted() {
  //   alert( this.$route.path);
  //   this.activepath = this.$route.path
  // }
}
</script>

<style>
.navdiv{
  display: flex;
  justify-content: space-evenly
}
.el-menu--horizontal>.el-menu-item.is-active{
  border: none
}
.el-menu.el-menu--horizontal{
  border: none;
}
.el-menu-item.is-active {
  background: url('../static/img/navrightchecked.png') no-repeat 100% 100%;
    background-size: contain;
  background-position: center;
}
.el-menu-item:nth-child(1).is-active,.el-menu-item:nth-child(2).is-active,.el-menu-item:nth-child(3).is-active {
  background: url('../static/img/navrightchecked.png') no-repeat 100% 100%;
    background-size: contain;
  background-position: center;
}
.el-menu-item:nth-child(4).is-active,.el-menu-item:nth-child(5).is-active,.el-menu-item:nth-child(6).is-active {
  background: url('../static/img/navleftchecked.png') no-repeat 100% 100%;
    background-size: contain;
  background-position: center;
}
.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
    background: url('../static/img/navrightchecked.png') no-repeat 100% 100%;
    background-size: contain;
  background-position: center;
}
.el-menu--horizontal>.el-menu-item:nth-child(4):focus,.el-menu--horizontal>.el-menu-item:nth-child(4):hover,.el-menu--horizontal>.el-submenu .el-submenu__title:hover{
    background: url('../static/img/navleftchecked.png') no-repeat 100% 100%;
    background-size: contain;
  background-position: center;
}
.el-menu--horizontal>.el-menu-item:nth-child(5):focus,.el-menu--horizontal>.el-menu-item:nth-child(5):hover,.el-menu--horizontal>.el-submenu .el-submenu__title:hover{
    background: url('../static/img/navleftchecked.png') no-repeat 100% 100%;
    background-size: contain;
  background-position: center;
}
.el-menu--horizontal>.el-menu-item:nth-child(6):focus,.el-menu--horizontal>.el-menu-item:nth-child(6):hover,.el-menu--horizontal>.el-submenu .el-submenu__title:hover{
    background: url('../static/img/navleftchecked.png') no-repeat 100% 100%;
    background-size: contain;
  background-position: center;
}

.el-menu--horizontal>.el-menu-item{
  color: #333;
  font-family: pmzd;
  background: url('../static/img/navleft.png') no-repeat 100% 100%;
    background-size: contain;
  background-position: center;
  width: 10%;
  text-align: center;
}

.el-menu-item:nth-child(4),.el-menu-item:nth-child(5),.el-menu-item:nth-child(6){
  background: url('../static/img/navright.png') no-repeat 100% 100%;
    background-size: contain;
  background-position: center;
}
.hl_title {
  font-size: 18px;
}
</style>
